<template>
  <div v-if="show"
       class="dialog-box">
    <!-- 蒙层 -->
    <div class="mask"
         @click="maskClick"/>

    <!-- 弹出框 -->
    <div :style="{width, height}"
         class="dialog">
      <div class="header" :class="[title? 'title-header' : '']">
        <div>{{ title }}</div>
        <i class="iconfont icon-close-new"
           @click="show = false"/>
      </div>
      <div class="body" :class="{'auto-body': auto}">
        <slot/>
      </div>
    </div>
  </div>
</template>

<script lang="ts"
        setup>
import {computed} from 'vue'

let emit = defineEmits<{
  (e: 'update:modelValue', v: boolean): void
  (e: 'close'): void
}>()

let props = withDefaults(defineProps<{
  modelValue?: boolean
  maskClose?: boolean
  width?: string
  height?: string
  title?: string
  auto?: boolean
}>(), {
  modelValue: true,
  maskClose: true,
  width: '600px',
  height: 'auto',
  auto: false,
  title: ''
})

let show = computed<boolean>({
  get(): boolean {
    return props.modelValue
  },
  set(v: boolean): void {
    emit('update:modelValue', v)
    if (!show.value) emit('close')
  }
})

function maskClick() {
  if (!props.maskClose) return
  show.value = false
}
</script>

<style lang="less"
       scoped>
.dialog-box {
  z-index: 8000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: fixed;

  .mask {
    position: absolute;
    z-index: 8000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(black, .2);
  }

  .dialog {
    position: absolute;
    border-radius: 4px;
    z-index: 8001;
    background-color: #fff;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .header {
      padding: 0 20px;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      &.title-header {
        height: 70px;
        border-bottom: 1px solid #f5f5f5;
      }

      div {
        font-size: 18px;
      }

      i {
        cursor: pointer;

        &:hover {
          color: #CF4444;
        }
      }
    }

    .body {
      max-height: 800px;
      padding: 20px 40px;
      font-size: 16px;

      &.auto-body {
        overflow-y: auto;
      }
    }
  }
}
</style>